<template>
  <el-dialog
    v-model="visible"
    :title="dataInfo.title + '-审核'"
    :close-on-click-modal="false"
    style="width: 60%;"
  >
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      label-width="120px"
      @onclick="onSubmit()"
    >
      <div class="mod-activityEnrollments">
        <el-row>
          <el-col :span="8">
            <div class="grid-content bg-purple" style="padding-left: 10px">
              <el-row>
                <h2>作品信息</h2>
                <el-col style="font-size: larger">
                  <span>
                    <b>活动名称：</b>
                    <span>{{ dataInfo.title }}</span>
                  </span>
                </el-col>
                <el-col style="font-size: larger">
                  <span>
                    <b>作者：</b>
                    <span>{{ dataInfo.apply.name }}</span>
                  </span>
                </el-col>
                <el-col style="font-size: larger">
                  <span>
                    <b>提交时间：</b>
                    <span>{{ dataInfo.apply.createdAt }}</span>
                  </span>
                </el-col>
                <el-col style="font-size: larger">
                  <span>
                    <b>审批状态：</b>
                    <span v-if="dataInfo.apply.status === 0">待审批</span>
                    <span v-else-if="dataInfo.apply.status === 1">已审批</span>
                    <span v-else-if="dataInfo.apply.status === 2">未通过</span>
                    <span v-else-if="dataInfo.apply.status === 3">未获奖</span>
                    <span v-else-if="dataInfo.apply.status === 4">获奖</span>
                  </span>
                </el-col>
              </el-row>
              <el-row>
                <h2>提交作品</h2>
                <el-col style="font-size: larger">
                  <span>
                    <b>报名表：</b>
                    <mul-file-upload
                      style="width: 65%"
                      v-model="dataInfo.fileList"
                      :btnVisible="false"
                    />
                  </span>
                </el-col>
              </el-row>
              <el-row>
                <el-col style="font-size: larger">
                  <span>
                    <b>参赛视频：</b>
                    <mul-file-upload
                      style="width: 65%"
                      v-model="dataInfo.videoList"
                      :btnVisible="false"
                    />
                  </span>
                </el-col>
                <el-col style="font-size: larger">
                  <span>
                    <b>作品照片：</b>
                    <mul-file-upload
                      style="width: 65%"
                      v-model="dataInfo.imageList"
                      :btnVisible="false"
                    />
                  </span>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="16" style="padding-left: 10px">
            <div class="grid-content bg-purple-light" style="padding-left: 10px">
              <el-row style="margin-bottom: 0">
                <h2>评分（10分制）</h2>
              </el-row>
              <p style="font-size: large;margin: 0">
                {{ dataForm.rate }}/10
              </p>
              <el-row>
                <el-col :span="9">
                  <el-rate
                    v-model="dataForm.rate"
                    :allow-half="dataForm.isSwitch"
                    :max="10">
                  </el-rate>
                </el-col>
                <el-col :span="15">
                  <span>包含半星</span>
                  <el-switch
                    v-model="dataForm.isSwitch"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </el-col>
              </el-row>
              <h3>详细评价指标</h3>
              <el-row>
                <el-col :span="24" style="margin-bottom: 0">
                  <span>创意性（1-10分）</span>
                </el-col>
                <el-col :span="18">
                  <el-slider v-model="dataForm.creativity" :max="10"></el-slider>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" style="margin-bottom: 0">
                  <span>技术水平（1-10分）</span>
                </el-col>
                <el-col :span="18">
                  <el-slider v-model="dataForm.technology" :max="10"></el-slider>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" style="margin-bottom: 0">
                  <span>表现力（1-10分）</span>
                </el-col>
                <el-col :span="18">
                  <el-slider v-model="dataForm.performance" :max="10"></el-slider>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" style="margin-bottom: 0">
                  <span>完成度（1-10分）</span>
                </el-col>
                <el-col :span="18">
                  <el-slider v-model="dataForm.complete" :max="10"></el-slider>
                </el-col>
              </el-row>
              <h3>评审意见</h3>
              <el-row
                style="margin-right: 10px">
                <el-col>
                  <el-input
                    v-model="dataForm.desc"
                    type="textarea"
                    :autosize="{minRows: 6, maxRows: 7}"
                  />
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="warning"
          @click="onApproval()"
        >
          不通过
        </el-button>
        <el-button @click="visible = false">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="onSubmit()"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {ElMessage, ElMessageBox} from "element-plus";
import {Debounce} from "@/utils/debounce.js";

const emit = defineEmits(['refreshDataList'])
const visible = ref(false)
const dataFormRef = ref(null)

const dataForm = reactive({
  id: 0,
  currentId: 0,
  status: 0,
  rate: 0,
  isSwitch: 0,
  creativity: 5,
  technology: 5,
  performance: 5,
  complete: 5,
  desc: null
})
const dataInfo = ref({
  id: 0,
  title: "",
  apply: {},
  template: {},
  fileList: [],
  videoList: [],
  imageList: []
})
/**
 * 获取数据列表
 */
const init = (id) => {
  visible.value = true
  dataForm.id = id || 0
  if (dataForm.id) {
    // 修改
    http({
      url: http.adornUrl(`/admin/submissions/apply/info/${id}`),
      method: 'get',
      params: http.adornParams()
    })
      .then(({data}) => {
        dataInfo.value = data
      })
  }
}
// 重审
const retrial = (id) => {
  visible.value = true
  dataForm.id = id || 0
  if (dataForm.id) {
    // 修改
    http({
      url: http.adornUrl(`/admin/submissions/review/info/${id}`),
      method: 'get',
      params: http.adornParams()
    })
      .then(({data}) => {
        dataForm.id = data.review.id
        dataForm.status = data.review.status
        dataForm.rate = data.review.rate
        dataForm.isSwitch = !!data.review.isSwitch
        dataForm.creativity = data.review.creativity
        dataForm.technology = data.review.technology
        dataForm.performance = data.review.performance
        dataForm.complete = data.review.complete
        dataForm.desc = data.review.content
        dataInfo.value = data.apply
      })
  }
}
defineExpose({init,retrial})

// 表单提交
const onSubmit = Debounce(() => {
  dataFormRef.value?.validate((valid) => {
    console.log(dataInfo.value.apply.userId)
    if (valid) {
      http({
        url: http.adornUrl('/admin/submissions/review/add'),
        method: 'post',
        data: http.adornData({
          userId: dataInfo.value.apply.userId,
          artId: dataInfo.value.apply.artId,
          applyId: dataInfo.value.apply.id,
          rate: dataForm.rate,
          isSwitch: dataForm.isSwitch ? 1 : 0,
          creativity: dataForm.creativity,
          technology: dataForm.technology,
          performance: dataForm.performance,
          complete: dataForm.complete,
          content: dataForm.desc
        })
      })
        .then(() => {
          ElMessage({
            message: '操作成功',
            type: 'success',
            duration: 1000,
            onClose: () => {
              visible.value = false
              emit('refreshDataList')
            }
          })
        })
    }
  })
})
const onApproval = () => {
  ElMessageBox.confirm('确定不通过?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      http({
        url: http.adornUrl(`/admin/submissions/apply/approval/${dataInfo.value.apply.id}`),
        method: 'post'
      })
        .then(() => {
          ElMessage({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              visible.value = false
              emit('refreshDataList')
            }
          })
        })
    })
}
</script>
<style>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
  margin-bottom: 10px;
}

.bg-purple-dark {
  background: #dce3e8;
}

.bg-purple {
  background: #efe9e9;
}

.bg-purple-light {
  background: #efeff3;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
